<template>
    <div class="strBody">
        <div class="row">
            <div class="col-xs-9 col-sm-9 col-md-9" style="padding:0 5px;padding-right: 20px;">
                <div class="jumbotron" style="margin-bottom:10px;">
                    <h2>411661篇游记/攻略</h2>
                    <p>653169人关注-13709人发表</p>
                    <p>快来加入我们吧！</p>
                </div>
                <transition name="fade">
                    <ul-list
                        v-model="strategyList"
                        :tool="tool"
                        v-show="tran"
                        style="animation-duration:1.6s;"
                    />
                </transition>
                <div ref="cardRef"></div>
            </div>
            <div
                class="col-xs-3 col-sm-3 col-md-3 rightList"
                style="position: sticky;top: 10px;padding:0;"
            >
                <el-card class="box-card">
                    <sort v-model="list" @an_alterSort="an_alterSort" />
                    <div
                        style="background-color: #DCDFE6;position: relative;display: block;height: 1px;width: 100%;margin-bottom:10px;"
                    ></div>
                    <span style="color: rgb(64, 158, 255);font-weight: 700;font-size: 16px;">游记攻略导航</span>
                    <div
                        style="justify-content: flex-end;display: flex;color: gray;font-size: 12px;"
                    >(支持四个筛选条件)</div>

                    <p>
                        <el-tag
                            v-for="tag in tags"
                            :key="tag.name"
                            closable
                            :type="tag.type"
                            @close="handleClose(tag)"
                        >{{tag.name}}</el-tag>
                    </p>

                    <el-collapse accordion value="3">
                        <el-collapse-item title=" 国内" name="1">
                            <el-badge
                                :value="item.value"
                                class="item"
                                v-for="(item,index) in gnList"
                                :key="index"
                            >
                                <el-button size="mini" @click="addTags(item.name)">{{item.name}}</el-button>
                            </el-badge>
                        </el-collapse-item>
                        <el-collapse-item title=" 国外" name="2">
                            <el-badge
                                :value="item.value"
                                class="item"
                                v-for="(item,index) in gwList"
                                :key="index"
                            >
                                <el-button size="mini" @click="addTags(item.name)">{{item.name}}</el-button>
                            </el-badge>
                        </el-collapse-item>
                        <el-collapse-item title=" 主题玩法" name="3">
                            <el-badge
                                :value="item.value"
                                class="item"
                                v-for="(item,index) in ztList"
                                :key="index"
                            >
                                <el-button size="mini" @click="addTags(item.name)">{{item.name}}</el-button>
                            </el-badge>
                        </el-collapse-item>
                    </el-collapse>
                </el-card>
                <div style="margin-top: 15px;" @click="gotoWrite">
                    <el-button type="primary" plain>我也要写攻略</el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import sort from "../mycomponents/sort.vue";
export default {
    components: {
        sort
    },
    data() {
        return {
            tran: true,
            strategyList: [
                {
                    id: 1,
                    likeNum: 8658,
                    plNum: 678,
                    src: [
                        require("../../../static/images/gl_1.jpg"),
                        require("../../../static/images/gl_2.jpg")
                    ],
                    title: "坐着火车游欧洲，精彩十日，梦幻之旅",
                    text:
                        " 欧铁之旅，再续前缘经常看我文章的朋友也许还记得，去年寒假，我们一家乘坐列车，穿行于欧洲大陆，在荷兰、瑞士、德国、法国、西班牙、意大利进行了长达50天的精彩旅行。虽然假期有尽头，但欧铁之行却只是始于彼时的一个点，年9月我又次应邀登上列车，再续前缘，开启了另一段精彩的欧旅程。下面的文章不能成为你游览世界的GPS，但也许这些性文可以诉你哪最能领略巴黎风情？在马赛什么最好吃？世界非遗叠塔什么样？什么在吉罗要亲狮子屁屁巴塞罗那高迪哪个建筑最棒？最童声在哪里？想知这些内容，请花半时和我们一起走进精的欧铁之旅"
                },
                {
                    id: 2,
                    likeNum: 58,
                    plNum: 67,
                    src: [
                        require("../../../static/images/gl_3.jpg"),
                        require("../../../static/images/gl_4.jpg")
                    ],
                    title: "慢行日本 | 赴一场函馆的冬日之约",
                    text:
                        "安政6年（1859年），函馆与横滨、长崎一起作为日本首批国际贸易港开放。 港口的开放带动了市井的繁荣，数不清的西洋人与西洋文化从这里上岸，源源不断的向内陆传播。踏上这片已近零下的冰雪大地。函馆的荣耀，就从这时开始说起。港口的开放带动了市井的繁荣，数不清的西洋人与西洋文化从这里上岸，源源不断的向内陆传播。踏上这片已近零下的冰雪大地。函馆的荣耀，就从这时开始说起。"
                },
                {
                    id: 3,
                    likeNum: 658,
                    plNum: 78,
                    src: [
                        require("../../../static/images/gl_5.jpg"),
                        require("../../../static/images/gl_6.jpg")
                    ],
                    title: "寻找别样的日本风光|东京-镰仓-伊豆",
                    text: `这是一篇迟来的游记。去年这个时候的旅行，因为拖延症，一直到现在才动手记录下来。俗话说，你永远不知道，明天和意外哪一个先来。2020年的开启方式，出乎了我们每个人的意料。因为这次的疫情，本来计划着的旅游，也因此泡汤了。那么，不如就跟着我一起回顾一下我们去年这个时候的旅行吧！`
                },
                {
                    id: 4,
                    likeNum: 838,
                    plNum: 67,
                    src: [
                        require("../../../static/images/gl_7.jpeg"),
                        require("../../../static/images/gl_8.jpeg")
                    ],
                    title: "不想浪费旅途的夜晚？成都夜生活指南送上！",
                    text:
                        "成都，被称为“中国极具幸福感的城市”，它一天中的24H都体现着满溢的幸福感。当夜幕降临，在这个“夜猫子”城市，亮起的不只是路灯，还有各种躁动的夜生活。成都的夜晚，不管你是十级吃货，还是蹦迪达人，想看传奇川剧或者静赏夜景，都能有对的去处。说到成都那肯定离不开美食，这里的好吃的可以吃上好几天不重样。不管是隆重的火锅，还是路边简单的小吃……一到了晚上，各种美食仿佛都更加鲜活，热闹的夜市也让人更加的有食欲。休闲的夜晚不用赶行程，有更多的时间一路逛吃逛吃，享受旅行中这种特别的乐趣。所以在抑制不住“欲望”的夜晚，去把它们都一一扫荡吧！"
                },
                {
                    id: 5,
                    likeNum: 868,
                    plNum: 638,
                    src: [
                        require("../../../static/images/gl_9.jpeg"),
                        require("../../../static/images/gl_10.jpeg")
                    ],
                    title: "两座小城，两种人生——伊东与镰仓",
                    text:
                        " 远离开了游人如织的 东京 大阪 ，这个海边小城几乎没有什么游客，每一条小街 都安 静得出奇，是一个完全不怕被打扰的非主流路线。旅馆是 伊东 有名的古建筑改建，纯和式的旅馆想必很多人去 日本 旅游都会体验一把。晚上躺在榻榻米上，伴着水流声入梦，非常惬意。公共空间很大，布置的也很舒适。纯木质结构的建筑充满历史感，自带的汤池虽不大但很干净舒服，住的几天每天去泡2、3次，从来没遇到过其他住客，简直要上瘾了有没有！booking评价超高的一家旅馆 酒店很受欧美背包客的欢迎，工作人员也非常热情。"
                }
            ],
            gnList: [
                { name: "四川", value: "27" },
                { name: "云南", value: "25" },
                { name: "江苏", value: "26" },
                { name: "北京", value: "23" },
                { name: "浙江", value: "23" },
                { name: "广东", value: "20" },
                { name: "河北", value: "20" },
                { name: "台湾", value: "17" },
                { name: "贵州", value: "17" },
                { name: "山东", value: "16" },
                { name: "内蒙古", value: "15" },
                { name: "西藏", value: "14" },
                { name: "广西", value: "14" },
                { name: "江西", value: "13" },
                { name: "青海", value: "12" },
                { name: "河南", value: "12" },
                { name: "黑龙江", value: "12" },
                { name: "新疆", value: "10" },
                { name: "安徽", value: "8" },
                { name: "海南", value: "8" },
                { name: "湖北", value: "6" },
                { name: "吉林", value: "5" },
                { name: "甘肃", value: "3" },
                { name: "湖南", value: "3" },
                { name: "山西", value: "3" },
                { name: "陕西", value: "2" }
            ],
            gwList: [
                { name: "欧洲", value: "102" },
                { name: "东南亚", value: "73" },
                { name: "北美洲", value: "41" },
                { name: "大洋洲", value: "27" },
                { name: "东亚", value: "23" },
                { name: "南亚", value: "20" },
                { name: "非洲", value: "14" },
                { name: "西亚", value: "9" },
                { name: "南美洲", value: "5" },
                { name: "南极洲", value: "2" }
            ],
            ztList: [
                { name: "滑雪", value: "12" },
                { name: "登山", value: "10" },
                { name: "自驾", value: "10" },
                { name: "建筑", value: "9" },
                { name: "美食", value: "9" }
            ],
            tags: [],
            // isact: 1,
            tool: ["one", "two", "three", "four"],
            list: ["精选推荐", "热门攻略", "最新发表"]
        };
    },
    methods: {
        transition() {
            if (this.tran == true) {
                this.tran = false;
            } else {
                this.tran = true;
            }
        },
        async handleClose(tag) {
            await this.transition();
            this.tags.splice(this.tags.indexOf(tag), 1);
            this.strategyList.reverse();
            this.transition();
        },
        async addTags(name) {
            let jub = true;
            this.tags.forEach(element => {
                if (element.name == name) {
                    jub = false;
                }
            });
            if (this.tags.length == 0 || (this.tags.length < 4 && jub)) {
                await this.transition();
                this.tags.push({ name, type: "" });
                this.strategyList.reverse();
                this.transition();
            }
        },
        async an_alterSort() {
            await this.transition();
            this.strategyList.reverse();
            this.transition();
        },
        gotoWrite() {
            if (!this.$global.user) {
                this.$router.push({
                    path: "/dl",
                    query: { path: this.$route.path }
                });
            } else {
                this.$router.push({ path: "/write" });
            }
        },
        throttle(fun, delay, time) {
            var timeout,
                startTime = new Date();

            return () => {
                var curTime = new Date();

                clearTimeout(timeout);
                // 如果达到了规定的触发时间间隔，触发 handler
                if (curTime - startTime >= time) {
                    fun();
                    startTime = curTime;
                    // 没达到触发间隔，重新设定定时器
                } else {
                    timeout = setTimeout(fun, delay);
                }
            };
        }
    },
    mounted() {
        var that = this;
        function lazyload() {
            //监听页面滚动事件
            var seeHeight = document.documentElement.clientHeight; //可见区域高度
            var scrollTop = document.documentElement.scrollTop; //滚动条距离顶部高度
            // var end = that.$refs.cardRef.length - 1; //现有的数组长度

            if (that.$refs.cardRef.offsetTop < seeHeight + scrollTop) {
                //添加新的图片
                that.$data.strategyList.push(
                    {
                        id: 1,
                        likeNum: 8658,
                        plNum: 678,
                        src: [
                            require("../../../static/images/gl_1.jpg"),
                            require("../../../static/images/gl_2.jpg")
                        ],
                        title: "坐着火车游欧洲，精彩十日，梦幻之旅",
                        text:
                            " 欧铁之旅，再续前缘经常看我文章的朋友也许还记得，去年寒假，我们一家乘坐列车，穿行于欧洲大陆，在荷兰、瑞士、德国、法国、西班牙、意大利进行了长达50天的精彩旅行。虽然假期有尽头，但欧铁之行却只是始于彼时的一个点，年9月我又次应邀登上列车，再续前缘，开启了另一段精彩的欧旅程。下面的文章不能成为你游览世界的GPS，但也许这些性文可以诉你哪最能领略巴黎风情？在马赛什么最好吃？世界非遗叠塔什么样？什么在吉罗要亲狮子屁屁巴塞罗那高迪哪个建筑最棒？最童声在哪里？想知这些内容，请花半时和我们一起走进精的欧铁之旅"
                    },
                    {
                        id: 2,
                        likeNum: 58,
                        plNum: 67,
                        src: [
                            require("../../../static/images/gl_3.jpg"),
                            require("../../../static/images/gl_4.jpg")
                        ],
                        title: "慢行日本 | 赴一场函馆的冬日之约",
                        text:
                            "安政6年（1859年），函馆与横滨、长崎一起作为日本首批国际贸易港开放。 港口的开放带动了市井的繁荣，数不清的西洋人与西洋文化从这里上岸，源源不断的向内陆传播。踏上这片已近零下的冰雪大地。函馆的荣耀，就从这时开始说起。港口的开放带动了市井的繁荣，数不清的西洋人与西洋文化从这里上岸，源源不断的向内陆传播。踏上这片已近零下的冰雪大地。函馆的荣耀，就从这时开始说起。"
                    },
                    {
                        id: 3,
                        likeNum: 658,
                        plNum: 78,
                        src: [
                            require("../../../static/images/gl_5.jpg"),
                            require("../../../static/images/gl_6.jpg")
                        ],
                        title: "寻找别样的日本风光|东京-镰仓-伊豆",
                        text: `这是一篇迟来的游记。去年这个时候的旅行，因为拖延症，一直到现在才动手记录下来。俗话说，你永远不知道，明天和意外哪一个先来。2020年的开启方式，出乎了我们每个人的意料。因为这次的疫情，本来计划着的旅游，也因此泡汤了。那么，不如就跟着我一起回顾一下我们去年这个时候的旅行吧！`
                    },
                    {
                        id: 4,
                        likeNum: 838,
                        plNum: 67,
                        src: [
                            require("../../../static/images/gl_7.jpeg"),
                            require("../../../static/images/gl_8.jpeg")
                        ],
                        title: "不想浪费旅途的夜晚？成都夜生活指南送上！",
                        text:
                            "成都，被称为“中国极具幸福感的城市”，它一天中的24H都体现着满溢的幸福感。当夜幕降临，在这个“夜猫子”城市，亮起的不只是路灯，还有各种躁动的夜生活。成都的夜晚，不管你是十级吃货，还是蹦迪达人，想看传奇川剧或者静赏夜景，都能有对的去处。说到成都那肯定离不开美食，这里的好吃的可以吃上好几天不重样。不管是隆重的火锅，还是路边简单的小吃……一到了晚上，各种美食仿佛都更加鲜活，热闹的夜市也让人更加的有食欲。休闲的夜晚不用赶行程，有更多的时间一路逛吃逛吃，享受旅行中这种特别的乐趣。所以在抑制不住“欲望”的夜晚，去把它们都一一扫荡吧！"
                    },
                    {
                        id: 5,
                        likeNum: 868,
                        plNum: 638,
                        src: [
                            require("../../../static/images/gl_9.jpeg"),
                            require("../../../static/images/gl_10.jpeg")
                        ],
                        title: "两座小城，两种人生——伊东与镰仓",
                        text:
                            " 远离开了游人如织的 东京 大阪 ，这个海边小城几乎没有什么游客，每一条小街 都安 静得出奇，是一个完全不怕被打扰的非主流路线。旅馆是 伊东 有名的古建筑改建，纯和式的旅馆想必很多人去 日本 旅游都会体验一把。晚上躺在榻榻米上，伴着水流声入梦，非常惬意。公共空间很大，布置的也很舒适。纯木质结构的建筑充满历史感，自带的汤池虽不大但很干净舒服，住的几天每天去泡2、3次，从来没遇到过其他住客，简直要上瘾了有没有！booking评价超高的一家旅馆 酒店很受欧美背包客的欢迎，工作人员也非常热情。"
                    }
                );
            }
        }
        // 采用了节流函数
        window.addEventListener("scroll", that.throttle(lazyload, 500, 1000));
    }
};
</script>
<style>
div.strBody {
    margin: 10px 40px;
}
div.strBody span.el-tag.el-tag--info.el-tag--small.el-tag--light {
    display: none;
}
/* div.strBody li.actived {
    color: #2494fc;
    font-weight: 700;
    box-shadow: 1px 1px 1px 0 #2494fc8a;
    border-radius: 3px;
    font-size: 17px;
} */

/* div.strBody div.rightList { */
/* padding-left: 20px;
    right: 10px;
    left: auto;
    top: auto;
    z-index: 0; */
/* } */

/* 巨幕 */
div.strBody div.jumbotron {
    background-image: url(../../../static/images/lb_2.jpg);
    color: #fff;
    padding: 10px;
}

/* right card */
div.strBody .item {
    margin-top: 15px;
    margin-right: 8px;
}

div.strBody sup.el-badge__content.is-fixed {
    right: 22px;
    font-size: 12px;
}
</style>